import React, {Component} from 'react';
import dayjs from "dayjs";
import {produce} from "immer";
import {DEFAULT, TIME} from "@/NewComment/constants";


function formatDate(time) {
  return dayjs(time).format('YYYY-MM-DD HH:mm:DD')
}


class List extends Component {

  render() {
    const {comments = [], active, delComment, changeCollect} = this.props;
    // sort方法 排序 ==> 修改原数组
    // 浅拷贝一个数组进行排序
    // 内层的数据没有发生变化，所以可以存在引用关系
    // react内部数据不可变的规范 ==> immer.js
    // immer.js
    // userImmer
    const newCommentList = produce(state => {
      if (active === DEFAULT) {
        // 按照id进行排序
        state.sort((a, b) => b.id - a.id)
      }
      if (active === TIME) {
        //   按照时间进行排序
        state.sort((a, b) => new Date(b.time) - new Date(a.time))
      }
    })(comments)
    // console.log(newCommentList.filter(item => comments.includes(item)))
    return (
      <ul className="comm-list">
        {
          newCommentList.map(item => (
            <li className="comm-item" key={item.id}>
              <div className="avatar" style={{backgroundImage: `url(${item.avatar})`}}/>
              <div className="info">
                <p className="name vip">
                  {item.name}
                  {item.vip && <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"/>}
                </p>
                <p className="time">
                  <span>{formatDate(item.time)}</span>
                  <span onClick={changeCollect(item.id)} className={`iconfont icon-collect${item.collect ? '-sel' : ''}`}/>
                  {this.props.user.name === item.name && <span className="del" onClick={delComment(item.id)}>删除</span>}
                </p>
                <p>
                  {item.content}
                </p>
              </div>
            </li>
          ))
        }
      </ul>
    );
  }
}

export default List;
// 需要完成的功能:
// 1、基础页面的渲染
// 2、删除按钮的按需展示(当前用户才展示删除按钮)
// 3、收藏图标的展示
// 4、头像的展示
// 5、vip图标的展示
// 6、时间使用dayjs进行格式化处理 2022-02-27 12:00:16
